<template>
  <div class="wrap">
    <Tabs ref="TabsRef" :config="config">
      <template #gl_hhr_taxationForm><GL_HHR_TaxationForm v-if="isShow('gl_hhr_taxationForm')" /></template>
      <template #gl_hhr_subscribe><GL_HHR_Subscribe v-if="isShow('gl_hhr_subscribe')" /></template>
    </Tabs>
  </div>
  <TabBar />
</template>

<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { onShow, Router } from '@U/common'
import Tabs from '@C/Tabs.vue'
import GL_HHR_TaxationForm from '@P/Custom_GL/Operation/HHR_TaxationFormList.vue'
import GL_HHR_Subscribe from '@P/Custom_GL/Operation/HHR_SubscribeList.vue'
import configJson from './config.json'
import type { IObj } from '@/interface'

onShow(() => {
  const d = Router.route().params?.key
  if (d) {
    dAct.value = d
  }
})
const TabsRef = ref()
const dAct = ref('')
watch(
    () => dAct.value,
    (newVal: string) => {
      if (newVal) {
        TabsRef.value?.change(newVal)
      }
    },
)
// Tabs
const config = computed(() => ((configJson as IObj).GL))
const isShow = (key: string) => config.value.findIndex((d: IObj) => key === d.key) !== -1

</script>
